<template>
  <div class="detail df fdc">
    <video autoplay controls class="video">
      <source :src="classObj.videoUrl" />
    </video>
    <component :is="variable" @start="startCourse" @end="endCourse"></component>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import editInfo from './components/edit-info.vue';
  import showInfo from './components/show-Info.vue';
  import { useStore } from '@/store';

  export default defineComponent({
    name: 'WorkDetail',
    components: {
      'tab-show': showInfo,
      'tab-edit': editInfo,
    },
    props: {},
    setup() {
      const router = useRouter();
      const store = useStore();

      const state = reactive({
        classObj: {} as any,
        variable: 'tab-show',
      });

      onMounted(async () => {

      });
      // 开始评课
      const startCourse = () => {
        state.variable = 'tab-edit';
      };
      // 取消或者完成评课
      const endCourse = (ev) => {
        state.variable = 'tab-show';
        if (ev) {
        }
      };

      return {
        ...toRefs(state),
        startCourse,
        endCourse,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .detail {
    height: calc(100% - 96px);
  }
  .video {
    width: 100%;
    height: 422px;
  }
</style>
